<template>
  <div class="calculator-window">
    <!-- 标题栏 -->
    <div class="window-header">
      <div class="window-title">
        <img src="@/assets/icons/calculator.svg" class="app-icon" />
        <span>计算器</span>
      </div>
      <div class="window-buttons">
        <span class="minimize">─</span>
        <span class="maximize">□</span>
        <span class="close" @click="$router.push('/')">×</span>
      </div>
    </div>

    <!-- 计算器主体 -->
    <div class="calculator-body">
      <!-- 显示屏 -->
      <div class="display">
        <div class="history">{{ history }}</div>
        <div class="current">{{ current }}</div>
      </div>

      <!-- 按键区域 -->
      <div class="keypad">
        <button class="key function" @click="clear">C</button>
        <button class="key function" @click="clear">CE</button>
        <button class="key function">%</button>
        <button class="key function" @click="backspace">⌫</button>

        <button class="key" @click="inputNumber(7)">7</button>
        <button class="key" @click="inputNumber(8)">8</button>
        <button class="key" @click="inputNumber(9)">9</button>
        <button class="key operator" @click="inputOperator('÷')">÷</button>

        <button class="key" @click="inputNumber(4)">4</button>
        <button class="key" @click="inputNumber(5)">5</button>
        <button class="key" @click="inputNumber(6)">6</button>
        <button class="key operator" @click="inputOperator('×')">×</button>

        <button class="key" @click="inputNumber(1)">1</button>
        <button class="key" @click="inputNumber(2)">2</button>
        <button class="key" @click="inputNumber(3)">3</button>
        <button class="key operator" @click="inputOperator('-')">-</button>

        <button class="key" @click="inputNumber(0)">0</button>
        <button class="key" @click="inputDecimal">.</button>
        <button class="key equals" @click="calculate">=</button>
        <button class="key operator" @click="inputOperator('+')">+</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const current = ref('0')
const history = ref('')
const operator = ref('')
const previousNumber = ref(null)
const newNumber = ref(true)

// 处理数字输入
const inputNumber = (num) => {
  if (newNumber.value) {
    current.value = num.toString()
    newNumber.value = false
  } else {
    if (current.value === '0') {
      current.value = num.toString()
    } else {
      current.value += num.toString()
    }
  }
}

// 处理运算符
const inputOperator = (op) => {
  previousNumber.value = parseFloat(current.value)
  operator.value = op
  history.value = `${current.value} ${op}`
  newNumber.value = true
}

// 处理等号
const calculate = () => {
  if (!operator.value || newNumber.value) return
  
  const currentNumber = parseFloat(current.value)
  let result = 0
  
  switch (operator.value) {
    case '+': result = previousNumber.value + currentNumber; break
    case '-': result = previousNumber.value - currentNumber; break
    case '×': result = previousNumber.value * currentNumber; break
    case '÷': result = previousNumber.value / currentNumber; break
  }
  
  history.value = `${previousNumber.value} ${operator.value} ${currentNumber} =`
  current.value = result.toString()
  operator.value = ''
  newNumber.value = true
}

// 清除
const clear = () => {
  current.value = '0'
  history.value = ''
  operator.value = ''
  previousNumber.value = null
  newNumber.value = true
}

// 处理小数点
const inputDecimal = () => {
  if (newNumber.value) {
    current.value = '0.'
    newNumber.value = false
  } else if (!current.value.includes('.')) {
    current.value += '.'
  }
}

// 处理退格
const backspace = () => {
  if (current.value.length > 1) {
    current.value = current.value.slice(0, -1)
  } else {
    current.value = '0'
  }
}

// 添加键盘支持
const handleKeydown = (e) => {
  // 数字键和小数点
  if (/^\d$/.test(e.key)) {
    inputNumber(parseInt(e.key))
  } else if (e.key === '.') {
    inputDecimal()
  }
  
  // 运算符
  const operatorMap = {
    '+': '+',
    '-': '-',
    '*': '×',
    '/': '÷'
  }
  if (operatorMap[e.key]) {
    inputOperator(operatorMap[e.key])
  }
  
  // 回车键和等号键
  if (e.key === 'Enter' || e.key === '=') {
    calculate()
  }
  
  // 退格键和删除键
  if (e.key === 'Backspace') {
    backspace()
  }
  
  // Escape键清除
  if (e.key === 'Escape') {
    clear()
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<style lang="scss" scoped>
.calculator-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: #F0F0F0;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: #E9E9E9;
    border-bottom: 1px solid #DDD;

    .window-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      
      .app-icon {
        width: 16px;
        height: 16px;
      }
    }

    .window-buttons {
      display: flex;
      gap: 4px;

      span {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        
        &:hover {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .calculator-body {
    padding: 12px;

    .display {
      background: white;
      padding: 8px;
      margin-bottom: 12px;
      text-align: right;
      
      .history {
        font-size: 12px;
        color: #666;
        min-height: 16px;
      }
      
      .current {
        font-size: 24px;
        font-weight: bold;
      }
    }

    .keypad {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;

      .key {
        aspect-ratio: 1;
        border: none;
        background: white;
        font-size: 16px;
        cursor: pointer;
        border-radius: 2px;
        
        &:hover {
          background: #F5F5F5;
        }
        
        &:active {
          background: #E5E5E5;
        }

        &.function {
          background: #F5F5F5;
        }

        &.operator {
          background: #F0F0F0;
        }

        &.equals {
          background: #0078D7;
          color: white;
          
          &:hover {
            background: #006CC1;
          }
          
          &:active {
            background: #005AA9;
          }
        }
      }
    }
  }
}
</style> 